<html>
<head>
	<meta charset="UTF-8">
	<title>threejs-展示</title>
    <style type="text/css">
        body{ margin: 0; }
    </style>
	<script src="../1js/threeJs/three.min.js"></script>
</head>
<body>

<script type="text/javascript">
//实例化渲染器
const renderer = new THREE.WebGLRenderer();
//实例化渲染器--设置宽和高
renderer.setSize(400, 400); 
//实例化渲染器--设置背景
renderer.setClearColor(0x8841ab); 
//实例化渲染器--添加到dom
document.body.appendChild(renderer.domElement);

//实例化场景
const scene = new THREE.Scene(); 

//实例化相机
const camera = new THREE.PerspectiveCamera(45, 1, 1, 200); 
camera.position.set(0, 0, 15);

//创建网格
function initMesh() {
    let geometry = new THREE.BoxGeometry(2, 2, 2);//创建几何体
    let material = new THREE.MeshNormalMaterial(); //创建材质
    let mesh = new THREE.Mesh(geometry, material); //创建网格
    mesh.rotation.x = 6; //沿x轴旋转0.01弧度
    mesh.rotation.y = 9;
    scene.add(mesh); //将网格添加到场景
    return mesh;
}
const mesh = initMesh();

renderer.render( scene, camera );
</script>
</body>
</html>